<html>
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <#include "portal/common/meta.html"/>
    <link rel="stylesheet" type="text/css" href="${basePath}/css/login.css" />
    <link rel="stylesheet" type="text/css" href="${basePath}/css/common.css" />
</head>
<body>
<div class="app" id="app">
    <div data-v-6143d696="" data-v-397789a4="" class="layout container">
        <div data-v-6143d696="" class="fix-bg"></div>
        <div data-v-6143d696="" class="layout-content"><img data-v-6143d696="" src="${basePath}/img/login_img.png" class="layout-label">
            <div data-v-cf2320aa="" data-v-397789a4="" class="card" data-v-6143d696="">
                <div data-v-397789a4="" data-v-cf2320aa=""><a href="/index"><img data-v-397789a4="" data-v-cf2320aa="" src="${basePath}/img/logo.png" alt="logo" class="logo"></a>
                    <form action="/user/login.do" method="post">
                        <span class="error-tips">${msg}</span>
                        <input type="hidden" value="${url}" ref="urlRef">
                        <div data-v-397789a4="" data-textarea="0" class="ui-form-item ui-big-input ui-gray-input" validate="true" data-v-cf2320aa="">
                            <input  v-model="username" name="username" type="text" placeholder="请输入用户名" maxlength="64" class="ui-form-text">
                            <!--<span class="ui-input-error" :style="userErrorTips">用户名格式错误</span>-->
                        </div>
                        <div data-v-397789a4="" data-textarea="0" class="ui-form-item ui-big-input ui-gray-input" validate="true" data-v-cf2320aa="">
                            <input  v-model="email" name="email" type="text" placeholder="请输入邮箱" maxlength="64" class="ui-form-text">
                            <!--<span class="ui-input-error" :style="userErrorTips">用户名格式错误</span>-->
                        </div>
                        <div data-v-397789a4="" data-textarea="0" class="ui-form-item ui-big-input ui-gray-input" validate="true" data-v-cf2320aa="">
                            <input  id="phone_input" v-model="phone" name="phone" type="text" placeholder="请输入手机号" maxlength="64" class="ui-form-text">
                            <div id="sendsms" data-v-397789a4="" class="ui-btn ui-big-btn orange-btn" data-v-cf2320aa="" @click="sendCode">
                                发送验证码
                            </div>
                            <!--<span class="ui-input-error" :style="userErrorTips">用户名格式错误</span>-->
                        </div>


                        <div data-v-397789a4="" data-textarea="0" class="ui-form-item ui-big-input ui-gray-input" validate="true" data-v-cf2320aa="">
                            <input  v-model="code" name="code" type="text" placeholder="请输入短信验证码" maxlength="64" class="ui-form-text">
                            <!--<span class="ui-input-error" :style="userErrorTips">用户名格式错误</span>-->
                        </div>
                        <div data-v-771508bb="" data-v-397789a4="" data-textarea="0" class="ui-form-item ui-big-input ui-gray-input" validate="true" data-v-cf2320aa="">
                            <input v-model="password"  name="password" type="password" placeholder="请输入密码" maxlength="16" class="ui-form-text">
                            <!--<span class="ui-input-error" :style="psdErrorTips">请输入 6-16 位的密码</span>-->
                            <!--<i data-v-771508bb="" class="iconfont icon-right show"></i>-->
                        </div>
                        <div data-v-771508bb="" data-v-397789a4="" data-textarea="0" class="ui-form-item ui-big-input ui-gray-input" validate="true" data-v-cf2320aa="">
                            <input v-model="rpassword"  name="rpassword" type="password" placeholder="请确认密码" maxlength="16" class="ui-form-text">
                            <!--<span class="ui-input-error" :style="psdErrorTips">请输入 6-16 位的密码</span>-->
                            <!--<i data-v-771508bb="" class="iconfont icon-right show"></i>-->
                        </div>

                        <div data-v-397789a4="" data-v-cf2320aa="" class="forget">
                            <a data-v-397789a4="" href="/biz/forgot" class="" data-v-cf2320aa="">忘记密码？</a>
                        </div>
                        <div data-v-397789a4="" class="ui-btn ui-big-btn orange-btn" data-v-cf2320aa="" @click="handleClick">
                            注册
                        </div>
                        <p data-v-397789a4="" data-v-cf2320aa="" class="have"> 若有帐号？点此 <a data-v-397789a4="" href="/login" class="" data-v-cf2320aa="">登录</a></p>

                    </form>

                </div>
            </div>
        </div>
        <p data-v-b9241014="" data-v-6143d696="" class="footer">© 2022 胡舒彦 Technology Ltd. All rights reserved</p>
    </div>
</div>

<!-- 引入脚本 -->

<#include "portal/common/js.html"/>
<script src="${basePath}/service/signup/index.js"></script>
<!--<script>-->
<!--    // {# 页面加载完成之后执行, 能获取页面上的所有对象 #}-->
<!--    $(function () {-->

<!--        // {# 如果手机号input中没有数据，那么发送短信按钮不能点击 #}-->
<!--        // {# keyup 点击按钮,松开 触发 #}-->
<!--        $('#phone_input').keyup(function(){-->

<!--            // {# trim()去除左右两边空格 #}-->
<!--            if($(this).val().trim()!=''){-->
<!--                $('#sendsms').prop('disabled', false)-->
<!--            }-->
<!--        });-->

<!--        // {# 获取发送验证码按钮点击事件 #}-->
<!--        $('#sendsms').click(function () {-->
<!--            // {# 判断手机号是否符合要求 #}-->
<!--            // {# 获取手机号 #}-->
<!--            var mobile = $('#phone_input').val().trim();-->
<!--            // {# 编写正则表达式规则 #}-->
<!--            var re = /^1[3-9]\d{9}$/;-->
<!--            // {# 利用正则判断手机号是否正确 #}-->
<!--            if(!re.test(mobile)){-->
<!--                // {# 手机号格式不正确,输出错误信息 #}-->
<!--                $('#phone_info').html('手机号格式错误').css('color','red');-->
<!--                return-->
<!--            }-->
<!--            // {# 再次输入正确手机号,清空错误信息 #}-->
<!--            $('#phone_info').html('');-->

<!--            // {# 使用箭头函数(function() &ndash;&gt; ()=> ),可以直接使用$(this) #}-->
<!--            // {# var _this = $(this); #}-->

<!--            // {# 设置倒计时长 #}-->
<!--            var num = 59-->
<!--            $('#sendsms').val(num+'秒');-->
<!--            // {# 设置计时器 #}-->
<!--            var t = setInterval(()=>{-->

<!--                // {# disabled checked selected enabled 这些属于input元素的属性 #}-->
<!--                // {# 这些属性不能够用 attr 来获取，必须用prop获取 #}-->
<!--                // {# 除了这些属性，其他任何属性都用 attr 获取 #}-->
<!--                // {# prop 不能获取自定义属性 #}-->

<!--                // {# 为了防止触发多个定时器, 在定时的时间之内，不能在点击 #}-->
<!--                $(this).prop('disabled', true);-->

<!--                num -= 1;-->
<!--                $('#sendsms').val(num+'秒');-->

<!--                // {# 停止计时器 #}-->
<!--                if(num==0){-->

<!--                    clearInterval(t);-->
<!--                    $('#sendsms').val('发送验证码');-->
<!--                    $(this).prop('disabled', false);-->

<!--                    // {# _this.prop('disabled', false) #}-->

<!--                }-->

<!--            },1000);-->

<!--            // {# 通过ajax执行后端程序， 发送短信验证码 #}-->
<!--            $.ajax({-->
<!--                url: 'user/sendCode.do',-->
<!--                type: 'post',-->
<!--                dataType: 'json',-->
<!--                data: {'mobile': mobile},-->
<!--                success: function (res) {-->
<!--                    if(res.status=='ok'){-->
<!--                        $('#smscode_info').html('发送验证码成功').css('color', 'green')-->
<!--                    }-->
<!--                }-->
<!--            })-->

<!--        })-->

<!--    })-->
<!--</script>-->
</body>
</html>
